<script setup>
import { companyName, companyNameEN } from '~/constants'

const { t, locale } = useLocale()

const links = ref([
  {
    name: locale.value === 'zh' ? companyName : companyNameEN,
    url: '/',
  },
  {
    name: t('menu.products'),
    url: '/product',
  },
])
</script>

<template>
  <section class="bg-[#323232] px-[190px] text-[#fff] max-md:px-[20px]">
    <div pt="[20px] max-md:[60px]" flex="~" justify="between" class="items-center">
      <div>
        <h3 text="[42px] max-md:[20px]" class="text-[#fff] uppercase opacity-[0.1]">
          LINKS
        </h3>
        <h3 text="[34px] max-md:[18px]" m="t-[-16px] max-md:t-[-4px]">
          {{ $t('menu.links') }}
        </h3>
      </div>
    </div>
    <ul class="links mt-[30px] flex pb-[28px] pt-[24px] max-md:mt-[30px] max-md:pb-[48px] max-md:pt-[30px]">
      <li v-for="link in links" :key="link.url" class="text-[20px] max-md:text-[20px]">
        <NuxtLink :to="link.url">
          {{ link.name }}
        </NuxtLink>
      </li>
    </ul>
  </section>
</template>

<style scoped lang="postcss">
.links {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  li {
    position: relative;
    display: flex;
    align-items: center;
    line-height: 28px;
  }
  li + li {
    @apply ml-[16px] max-md:ml-[16px] pl-[16px] max-md:pl-[16px];
    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      background: rgba(255, 255, 255, 0.3);
      @apply w-[1px] max-md:w-[1px] h-[16px] max-md:h-[16px];
    }
  }
}
</style>
